<template>
	<view class="index-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="false" color="#fff" :title="title"></uni-navbar></view>

		<view class="bg-img"><image class="image" src="/static/img/bg_05.jpg" mode="aspectFill"></image></view>

		<view class="user-box" v-if="info.id">
			<view class="head"><image class="image" :src="$imagePreview(info.remark1)" mode="aspectFill"></image></view>
			<view class="h1">{{ info.userName }}</view>
			<view class="h1">{{ info.phoneNumber }}</view>
			<view class="h1">{{ info.stationName }}</view>
		</view>

		<view class="fiexd-btm" v-if="info.id">
			<view class="form-btn" @click="navTo('/pages/clue/add?id=' + info.id)"><image class="image" src="/static/img/btn_05.png" mode="widthFix"></image></view>
			<!-- <view class="flex-box">
				<view class="form-btn" @click="navTo('/pages/clue/add?id=' + info.id)"><image class="image" src="/static/img/btn_04.png" mode="widthFix"></image></view>
				<view class="form-btn" @click="navTo('/pages/clue/list')"><image class="image" src="/static/img/btn_03.png" mode="widthFix"></image></view>
			</view> -->
		</view>

		<u-modal v-model="show" :content="content" :zoom="false" :mask-close-able="true" :show-cancel-button="true">
			<template v-slot:confirm-button>
				<button class="btn hairline-left" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">确定</button>
			</template>
		</u-modal>
		
		<!-- #ifdef MP -->
		<uni-privacy initiative></uni-privacy>
		<!-- #endif -->
	</view>
</template>

<script>
import uniPrivacy from '@/components/uni-privacy.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniPrivacy
	},
	data() {
		return {
			title: '码上见代表',
			text: '',
			show: false,
			id: '',
			sCode: '',
			content: '请绑定手机号',
			infoRes: {
				avatarUrl: '',
				gender: 0,
				nickName: '微信用户'
			},

			info: {}
		};
	},
	onLoad(option) {
		this.$store.commit('logout');
		this.loadLogin();
		if (option && option.id) {
			this.id = option.id;
		}
		if (option.q) {
			const q = decodeURIComponent(option.q);
			this.id = q.split('=')[1] || option.id;
		}
		this.loadData();
	},
	onShareAppMessage(res) {
		return {
			title: '码上见代表',
			path: '/pages/clue/index?id=' + this.id
		};
	},
	onShareTimeline(res) {
		return {};
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
			} else {
				// this.$logout();
			}

			uni.hideHomeButton();
		},
		loadData() {
			this.$request('/system/sys-user/codePath', {
				id: this.id
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				if (!res.data.id) {
					this.$msg('暂无数据');
					return false;
				}
				this.info = res.data;

				// this.title = this.info.userName;
				// uni.setNavigationBarTitle({
				// 	title: this.title
				// });
			});
		},
		navTo(e) {
			uni.navigateTo({
				url: e
			});
			// if (this.userInfo.userInfo) {
			// 	uni.navigateTo({
			// 		url: e
			// 	});
			// } else {
			// 	this.$store.commit('logout');
			// 	this.getUserProfile();
			// }
		},
		getUserProfile(e) {
			// 推荐使用uni.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
			uni.login({
				provider: 'weixin',
				success: (res) => {
					if (res.code) {
						this.jsCode = res.code;
						this.show = true;
					} else {
						console.log('登录失败！' + res.errMsg);
					}
				}
			});
		},
		onGetPhoneNumber(e) {
			if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
				//拒绝授权后弹出一些提示
				this.$msg('请同意获取手机号用于提报问题');
				console.log(e.detail);
			} else {
				this.encryptedData = e.detail.encryptedData; //加密的用户信息
				this.iv = e.detail.iv; //加密算法的初始向量
				// let pc = new WXBizDataCrypt('wxa3cad2b5781a0e48', this.session_key);
				// let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
				let data = {
					encryptedData: this.encryptedData,
					clientCode: '370705',
					iv: this.iv,
					userInfo: this.infoRes,
					code: this.jsCode
				};
				this.submit(data);
			}
		},
		submit(form) {
			this.$request('/wechat/login', form, {
				load: true
			}).then((res) => {
				if (!res.data.userId) {
					this.$msg('登录失败');
					return false;
				}
				let userInfo = res.data;
				userInfo.userInfo = this.infoRes;
				userInfo.roleCodes = ['qunzhong'];
				userInfo.roleNames = ['人民群众'];

				userInfo.sysUser.clientCode = userInfo.sysUser.clientCode || '370705';

				this.$store.commit('login', userInfo);
				this.$msg('登录成功');
				// uni.navigateBack();
			});
		}
	}
};
</script>

<style lang="scss">
.index-view {
	position: relative;
	z-index: 1;
}

.user-box {
	overflow: hidden;
	margin: 100rpx 0;
	font-size: 16px;
	color: #666;
	line-height: 48rpx;
	text-align: center;

	.image {
		margin: 0 auto 26rpx;
		width: 360rpx;
		height: 450rpx;
		border-radius: 20rpx;
		// background-color: #ce2d2c;
	}

	.h1 {
		font-size: 20px;
		font-weight: bold;
		color: #fff;
		line-height: 74rpx;
	}
}

.bg-img {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;

	.image {
		width: 100%;
		height: 100%;
	}
}

.container {
	background-color: #fff;
}

.fiexd-btm {
	position: static;
	padding: 30rpx;

	.form-btn {
		width: 100%;
	}

	.flex-box .form-btn {
		width: 48%;
	}

	.form-btn .image {
		width: 100%;
	}
}
</style>
